<template>
    <a-modal
        :title="!currRow ? '新建自评表' : '编辑自评表'"
        :visible="isShowModal"
        width="40%"
        :footer="null"
        dialogClass="custom-modal"
        :maskClosable="false"
        @cancel="handleCancel"
    >
        <a-spin :spinning="loadingAreaOptions || loadingRoleOptions">
            <a-form-model
                :model="form"
                ref="form"
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 18 }"
                :rules="rules"
                :colon="false"
                class="m-form-model"
            >
                <a-row :gutter="10">
                    <!--                    <a-col :span="24" class="mb16">-->
                    <!--                        <a-form-model-item label="自评名称" prop="name">-->
                    <!--                            <a-input-->
                    <!--                                autoComplete="off"-->
                    <!--                                placeholder="请输入自评名称"-->
                    <!--                                v-model.trim="form.name"-->
                    <!--                                allowClear-->
                    <!--                            />-->
                    <!--                        </a-form-model-item>-->
                    <!--                    </a-col>-->
                    <a-col :span="24" class="mb16">
                        <a-form-model-item label="评分标准" prop="applyYear">
                            <a-select placeholder="请选择评分标准" v-model="form.applyYear" allowClear>
                                <a-select-option
                                    v-for="(item, index) in templateList"
                                    :value="item.applyYear"
                                    :key="index"
                                >
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                        <a-button class="fr mr20" @click="handleCancel">取消</a-button>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
    </a-modal>
</template>
<script>
import { FormModel, TreeSelect } from 'ant-design-vue'
import { selfEvaluationApi } from '@/common/api/selfEvaluation'
import { getTreeData } from '@/utils/methods'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
const rules = {
    name: [{ required: true, message: '请选择城市名称', trigger: 'blur' }],
    applyYear: [{ required: true, message: '请选择创建年度', trigger: 'blur' }],
    evaluationDate: [{ required: true, message: '请选择自评时间', trigger: 'blur' }],
}
export default {
    data() {
        return {
            SHOW_PARENT,
            loadingAreaOptions: false,
            loadingRoleOptions: false,
            confirmLoading: false,
            form: {
                name: null,
                applyYear: [],
                evaluationDate: null,
            },
            rules: {
                ...rules,
            },
            treeData: [],
            userTypeList: [
                {
                    name: '企业用户',
                    id: 1,
                },
                {
                    name: '政府用户',
                    id: 2,
                },
                {
                    name: '后台用户',
                    id: 3,
                },
            ],
        }
    },
    components: {
        AFormModelItem: FormModel.Item,
    },
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        roleList: {
            required: false,
            type: Array,
        },
        areaInitOptions: {
            required: false,
            type: Array,
            default: () => [],
        },
        templateList: {
            required: false,
            type: Array,
        },
        treeSelectedAreaId: {
            required: false,
            type: String,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        beforeShowModal() {
            if (this.currRow) {
                // 编辑
                const { name, applyYear = [] } = this.currRow

                Object.assign(this.form, {
                    name,
                    applyYear,
                })
            }
        },
        async save() {
            const { name, applyYear, evaluationDate } = this.form
            const apiType = this.currRow ? 'edit' : 'add'
            this.confirmLoading = true
            let res
            try {
                res = await selfEvaluationApi[apiType]({
                    name,
                    applyYear,
                    evaluationDate,
                    id: this.currRow && this.currRow.id,
                })
                if (res.code == 200) {
                    this.$message.success('操作成功')
                    this.$emit('update:isShowModal', false)
                    this.$emit('updateData')
                } else {
                    this.$message.error(res.message)
                }
            } catch (e) {
                console.log(e)
            }
            this.confirmLoading = false
        },
        async handleOk() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.save()
                } else {
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped lang="scss">
/deep/ .modal-tree-select .ant-select {
    min-height: 32px !important;
    height: unset !important;
}
.supervise-search-icon {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 3px;
}
.search-icon:hover {
    color: #1890ff;
}
.supervise-search-icon:hover {
    color: #1890ff;
}
/deep/ .ant-select-open .ant-select-arrow-icon svg {
    transform: rotate(0deg);
    transition: transform 0s;
}
/deep/ .ant-input {
    padding-right: 40px;
}
/deep/ .ant-select-selection__rendered {
    margin-right: 40px;
}
/deep/ .ant-cascader-picker-label {
    padding-right: 40px;
}
/deep/ .ant-select-selection__clear,
/deep/.ant-cascader-picker-clear {
    right: 28px;
}
</style>
